/**
 * Created with hong.rong
 * Date:2020/07/17
 */

import React, { useState, Fragment } from 'react'
import { isFunction } from 'lodash'
import {
  Modal,
  Form,
  Input,
  message,
  Col,
  Row,
  DatePicker,
  Cascader,
} from 'antd'
import { carryModify } from '@/services/carryPosition'
import Upload from './Upload'
import areas from '@/constant/area'

const { RangePicker } = DatePicker

const TYPE = {
  CREATE: {
    LABEL: '新增自提点',
    VALUE: 'CREATE',
  },
  EDIT: {
    LABEL: '编辑自提点',
    VALUE: 'EDIT',
  },
}

const labelWidth = 90

function ModalForm({ form }) {
  return (
    <Form labelAlign="left" form={form}>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            label="自提点名称"
            name="carryName"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Input placeholder="请输入" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="自提点ID"
            name="carryId"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Input placeholder="请输入" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="负责人姓名"
            name="leader"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Input placeholder="请输入" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="负责人电话"
            name="phone"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Input placeholder="请输入" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="微信号"
            name="wx"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Input placeholder="请输入" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="服务时间"
            name="serviceDate"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <RangePicker
              onChange={(_, o) => {
                if (o[0] && o[1]) {
                  form.setFieldsValue({ serviceTime: o.join('~') })
                } else {
                  form.setFieldsValue({ serviceTime: '' })
                }
              }}
            />
          </Form.Item>
          <Form.Item noStyle name="serviceTime">
            <Input type="hidden" />
          </Form.Item>
        </Col>
        {/*<Col span={24}>*/}
        {/*<Form.Item*/}
        {/*label="二维码"*/}
        {/*name="codeUrl"*/}
        {/*rules={[{ required: true }]}*/}
        {/*qql-form-label-width={labelWidth}*/}
        {/*>*/}
        {/*<Upload />*/}
        {/*</Form.Item>*/}
        {/*</Col>*/}
        <Col span={12}>
          <Form.Item
            label="选择地区"
            name="position"
            rules={[{ required: true, message: '请选择选择地区' }]}
            qql-form-label-width={labelWidth}
          >
            <Cascader
              changeOnSelect
              options={areas}
              placeholder="请选择"
              onChange={(_, o) => {
                if (o[0]) {
                  form.setFieldsValue({
                    provinceName: o[0].label,
                    provinceCode: o[0].value,
                  })
                }
                if (o[1]) {
                  form.setFieldsValue({
                    cityName: o[1].label,
                    cityCode: o[1].value,
                  })
                }
                if (o[2]) {
                  form.setFieldsValue({
                    areaName: o[2].label,
                    areaCode: o[2].value,
                  })
                }
              }}
            />
          </Form.Item>
          <Form.Item noStyle name="provinceCode">
            <Input type="hidden" />
          </Form.Item>
          <Form.Item noStyle name="cityCode">
            <Input type="hidden" />
          </Form.Item>
          <Form.Item noStyle name="areaCode">
            <Input type="hidden" />
          </Form.Item>
          <Form.Item noStyle name="provinceName">
            <Input type="hidden" />
          </Form.Item>
          <Form.Item noStyle name="cityName">
            <Input type="hidden" />
          </Form.Item>
          <Form.Item noStyle name="areaName">
            <Input type="hidden" />
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item
            label="详细地址"
            name="address"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Input placeholder="请输入" />
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item
            label="备注"
            name="remark"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Input.TextArea rows={4} placeholder="请输入" />
          </Form.Item>
        </Col>
      </Row>
    </Form>
  )
}

export default function Modify({ children, refreshList }) {
  const [visible, setVisible] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  // const [current, setCurrent] = useState({})
  const [modalType, setModalType] = useState(null)
  const [form] = Form.useForm()

  /**
   * 提交
   */
  const handleOk = () => {
    form.validateFields().then(async values => {
      delete values.position
      delete values.serviceDate
      setConfirmLoading(true)
      const { data = {} } = await carryModify(values)
      if (data && data.code === 0) {
        message.success('保存成功')
        handleCancel()
        isFunction(refreshList) && refreshList()
      } else {
        handleCancel()
      }
    })
  }
  /**
   * 显示弹框
   * @type {*|Function}
   */
  const handleShow = (modalType, current) => {
    if (modalType === TYPE.EDIT.VALUE) {
      console.log(current, 'current')
      // setCurrent(current)
      form.setFieldsValue(current)
    }
    setModalType(modalType)
    setVisible(true)
  }
  /**
   * 取消弹框
   * @type {*|Function}
   */
  const handleCancel = () => {
    setVisible(false)
    setConfirmLoading(false)
    // setCurrent({})
    setModalType(null)
    form.resetFields()
  }

  return (
    <Fragment>
      {isFunction(children) && children(handleShow)}
      <Modal
        centered
        width={900}
        destroyOnClose
        title={(TYPE[modalType] || {}).LABEL}
        visible={visible}
        confirmLoading={confirmLoading}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <ModalForm form={form} />
      </Modal>
    </Fragment>
  )
}
Modify.TYPE = TYPE
